/** @jsxRuntime classic */
function createElement(type, props, ...children) {
    return {
        type,
        props: {
            ...props,
            children: children.map(child => {
                return typeof child === "object" ? child : createTextElement(child)
            })
        }
    }
}

function createTextElement(text) {
    return {
        type: "TEXT_ELEMENT",
        props: {
            nodeValue: text,
            children: []
        }
    }
}

function render(element,container) {
    const dom = element.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(element.type);
    const isProperty = key => key !== "children";
    Object.keys(element.props).filter(isProperty).forEach(name => {
        dom[name] = element.props[name];
    })
    element.props.children.forEach((child) => {
        render(child,dom);
    })
    container.appendChild(dom);
}

const Didact = {
    createElement,
    render
}

/** @jsx Didact.createElement */
const element = (
    <div id="foo">
        <a>bar</a>
        <b></b>
    </div>
)

Didact.render(element, document.getElementById("root"));

// 这个版本有的问题：
// 一旦开始渲染，在我们将 react element 数渲染出来之前没法暂停。 如果这颗树很大，可能会对主线程进行阻塞。
// 这意味着浏览器的一些高优先级任务会一直等待渲染完成，如：用户输入，保证动画顺畅。